<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>Google+ 游戏频道焦点图效果</title>
    <style>
    body,
    div,
    ul,
    li,
    h5,
    p {
        margin: 0;
        padding: 0;
    }
    
    body {
        font: 13px arial, sans-serif;
        background: #9D9D9D;
    }
    
    li {
        list-style: none;
    }
    
    #example,
    .google {
        position: relative;
        width: 768px;
        height: 445px;
        margin: 10px auto;
        overflow: hidden;
    }
    
    .google .list {
        position: relative;
        height: 435px;
    }
    
    .google .list img {
        position: absolute;
        top: 0;
        left: 0;
        width: 768px;
        height: 435px;
        z-index: -1;
    }
    
    .google ul {
        position: absolute;
        width: 814px;
        height: 42px;
        bottom: 0;
        z-index: 999999999;
        padding-left: 354px;
    }
    
    .google ul li {
        float: left;
        width: 32px;
        height: 38px;
        display: inline;
        margin-right: 10px;
        border: 2px solid #FFF;
        border-radius: 2px;
    }
    
    .google ul li img {
        float: left;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }
    
    .google ul li div h5 {
        position: absolute;
        width: 84px;
        background: #444;
        border-radius: 2px;
        left: -35px;
        bottom: 47px;
        display: none;
        color: #FFF;
        text-align: center;
        padding: 4px 10px;
    }
    
    .google ul li div a {
        display: none;
    }
    
    .google ul li.active div {
        position: absolute;
        height: 90px;
        left: 65px;
        z-index: -1;
        bottom: -2px;
        white-space: nowrap;
    }
    
    .google ul li.active div h5 {
        position: absolute;
        color: #333;
        width: auto;
        left: 0;
        bottom: 0;
        float: left;
        height: 55px;
        font-size: 130%;
        font-weight: 400;
        background: #FFF;
        border-radius: 5px;
        display: block;
        opacity: 0.7;
        filter: alpha(opacity=70);
        padding: 10px 10px 0 15px;
    }
    
    .google ul li.active a {
        position: absolute;
        bottom: 0;
        color: #FFF;
        float: left;
        display: block;
        margin-left: 15px;
        border: 1px solid #3079ED;
        background: #4D90FE;
        text-decoration: none;
        padding: 3px 6px;
    }
    
    .google ul li.active a:hover {
        background: #357AE8;
        border-color: #2F5BB7;
    }
    
    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 768px;
        height: 445px;
        z-index: 9999999999;
        background: #B7B7B7;
        opacity: 1;
        filter: alpha(opacity=100);
    }
    
    .load {
        position: absolute;
        top: 200px;
        left: 50%;
        color: #fff;
        width: 320px;
        height: 40px;
        text-align: center;
        margin-left: -162px;
        background: url(../../../src/images/googlebar.png) 0 bottom no-repeat;
        padding: 0 2px;
        overflow: hidden;
    }
    
    .load p {
        position: absolute;
        left: 2px;
        bottom: 2px;
        height: 16px;
        overflow: hidden;
        background: url(../../../src/images/googlebar_line.gif);
    }
    
    #copyright {
        color: #FFF;
        text-align: center;
        padding: 10px 0;
        border-top: 2px solid #FFF;
    }
    
    #copyright a {
        color: #FFF;
        padding: 2px 5px;
        border-radius: 10px;
        background: #666;
        text-decoration: none;
    }
    </style>
</head>

<body>
    <div id="example">
        <div class="overlay">
            <div class="load">数据转入中...<span>0%</span>
                <p></p>
            </div>
        </div>
    </div>
    <div id="copyright">如蒙转载请注明出处 <a href="http://js.fgm.cc">Fgm.cc</a> , By &mdash; Ferris, QQ:21314130</div>
    <script src="../../../src/js/google.js"></script>
    <script>
    var data = [{
        img: "../../../src/images/google1.jpg",
        tit: "Bubble Witch Saga",
        url: "javascript:;"
    }, {
        img: "../../../src/images/google2.jpg",
        tit: "GolMania",
        url: "javascript:;"
    }, {
        img: "../../../src/images/google3.jpg",
        tit: "Bug Village",
        url: "javascript:;"
    }, {
        img: "../../../src/images/google4.jpg",
        tit: "Dragon Age Legends",
        url: "javascript:;"
    }, {
        img: "../../../src/images/google5.jpg",
        tit: "Triple Town",
        url: "javascript:;"
    }, {
        img: "../../../src/images/google6.jpg",
        tit: "GolMania",
        url: "javascript:;"
    }, {
        img: "../../../src/images/google7.jpg",
        tit: "GT Racing: Motor Academy",
        url: "javascript:;"
    }, {
        img: "../../../src/images/google8.jpg",
        tit: "Dragons of Atlantis",
        url: "javascript:;"
    }, {
        img: "../../../src/images/google9.jpg",
        tit: "Edgeworld",
        url: "javascript:;"
    }, {
        img: "../../../src/images/google10.jpg",
        tit: "Bejeweled Blitz",
        url: "javascript:;"
    }, {
        img: "../../../src/images/google11.jpg",
        tit: "Backyard Monsters",
        url: "javascript:;"
    }];

    var aImg = function() {
        for (var i = data.length, aResult = []; i--;) aResult = aResult.concat(data[i].img, data[i].img.replace(/(\d+)/g, "$1_"));
        return aResult
    }();

    var example = null;

    new Loading("example", aImg, function() {
        example || (example = new Google("example", data).autoPlay(5000));
    });
    </script>
</body>

</html>
